<template>
    <div>
<!--
      <child>
        <template   v-slot:header="slotProps">
            {{slotProps.user.age}}
        </template>
      </child>
-->

<!--      <child>
        <template  v-slot:[slotName]>
           我是父组件的{{slotName}}
        </template>
      </child>

      <el-button @click="changeSlot">切换插槽</el-button>-->
      <child>
        <template  slot="header" >
          <div>我是从父组件传过来的头部</div>
        </template>
        <template  slot="footer" name="啦啦啦啦啦">
          <div>我是从父组件传过来底部的呃</div>
        </template>
      </child>

      <el-button @click="changeSlot">切换插槽</el-button>
    </div>
</template>

<script>
import child from './child.vue'
export default {
  components:{
    child
  },
  data(){
    return{
      slotName:'footer'
    }
  },
  created() {

  },
  methods:{
    changeSlot(){
      this.slotName = 'header'
    }
  }
}

</script>

<style scoped>

</style>
